
/*=============================================
=            06. Featured service            =
=============================================*/

/*----------  Featured service backgrounds  ----------*/


.featured-service-bg-1{
	background-image: url('../images/slider-bottom/img-box1.jpg');
}
.featured-service-bg-2{
	background-image: url('../images/slider-bottom/img-box2.jpg');
}
.featured-service-bg-3{
	background-image: url('../images/slider-bottom/img-box3.jpg');
}


/*----------  single featured service style  ----------*/


.single-featured-service{
	min-height: 138px;
	background-color: #ddd;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;

	@media #{$tablet-device}{
		margin-bottom: 30px;
	}

	@media #{$large-mobile}{
		margin-bottom: 30px;
	}


	.single-featured-service-content{
		position:absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-align: center;
		z-index: 3;
		color: #fff;
		padding: 15px;
		font-size: 12px;
		visibility: hidden;
		opacity: 0;
		transition: 0.3s;

		display: flex;
        flex-direction: column;
        vertical-align: middle;
        justify-content: center;

 


		a{
			border: 1px solid #fff;
			padding: 5px 10px;
			display: inline-block;
            width: 50%;
			margin: 0 auto;
			
			@media #{$tablet-device}{
				width: 63%;
			}

			&:hover{
				background-color: #000000;
				color: #fff;
			}
		}

		h3{
			color: #fff;
			font-size: 18px;

			@media #{$tablet-device}{
				font-size: 15px;
			}

		}

		&:before{
			position: absolute;
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #334A55;
			content: "";
			z-index: -1;
			opacity: 0.7;
		}
	}

	&:hover{
		.single-featured-service-content{
			visibility: visible;
			opacity: 1;
			animation: zoomIn 300ms ease;
		}
	}
}

/*=====  End of 06. Featured service  ======*/


